<template>
    <div>
        <vheader></vheader>
        <el-container style="border:0px solid #e3e3;">
            <el-container style="padding-top:20px;">
                <el-aside style="width:240px; overflow-y:scroll;">
                    <vLeft></vLeft>
                </el-aside>
                <el-container>
                    <el-main>
                        <vContentMain></vContentMain>
                    </el-main>
                </el-container>
                <!-- <el-aside>
                    <vAD></vAD>
                </el-aside> -->
            </el-container>
            <!-- <el-footer style="height: 50px;">Footer</el-footer> -->
        </el-container>
    </div>
</template>
<script>
    import vheader from './Header';
    import vLeft from './Left';
    import vAD from './AD';
    import vContentMain from './ContentMain';
    export default {
        data() {
            return {
                key: ""
            }
        },
        components:{
            vheader,vLeft,vAD,vContentMain
        },
        mounted:function () {
            let self = this;
            window.onresize = function () {
                self.clientHeight = document.documentElement.clientHeight - 136;
                self.clientWidth = document.documentElement.clientWidth;
                $(".el-main").height(self.clientHeight);
                $(".el-aside").height(self.clientHeight + 40);
            };
            window.onresize();

            $(".el-aside").hover(function(){
                $(".el-aside").css("overflow","auto")
            },function(){
                $(".el-aside").css("overflow","hidden")
            });
            $(".el-main").hover(function(){
                $(".el-main").css("overflow","auto")
            },function(){
                $(".el-main").css("overflow","hidden")
            })
        },
    }
</script>
<style scoped>
    .el-container, .page-container { width: 1300px;padding: 0;margin: 0 auto;}
    .el-header { border:0px solid #e3e3;}
    .el-aside { width:100px; border:0px solid #e3e3; }
    .el-footer { border:0px solid #e3e3;}
    .el-main{ overflow-y: auto;}
</style>